<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>林本硕</title>
        <style type="text/css">
            body{
                background-image: url(./images/6.jpeg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-attachment: fixed;
                margin: auto;
            }
            .table1{
                border-collapse: collapse;
                border: 1px solid #000;
                margin: auto;
                text-align: center;
            }
            #tr,td{
                padding-top: 10px;
                padding-bottom: 10px;
                text-align: center;
                width: 200px;
                border: 1px solid #000;
            }
                
            
           

            
        </style>
	</head>
	<body>
        <table class="table1">
            <h1 align="center">基本信息填写</h1>
            <form>
                <table class="table1">
                    <tr>
                        <td>姓名:</td>
                        <td><input type="text" id="xingming" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <input type="radio" name="gender" value="male" >男
                            <input type="radio" name="gender" value="female">女
                        </td>

                    </tr>
                    <tr><td>年龄:</td>
                        <td><select name="degree">
                            <option value="bachelor">18</option>
                            <option value="master">19</option>
                            <option value="doctor">未知</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>手机号</td>
                        <td><input type="text" id="shoujihao" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td>身份证号：</td>
                        <td><input type="text" id="shenfenzheng" placeholder="请输入身份证"></td>
                    </tr>
                    
                    <tr>
                        <td><input type="submit" value="提交" onclick="checkInput()";></td>
                        <td><input type="reset" value="重置"></td>
                    </tr>
                </table>
                
            </form>
        </table>
        <script>
            function checkInput() {
                var shoujihao = document.getElementById("shoujihao").value;
                var shenfenzheng = document.getElementById("shenfenzheng").value;
                var xingming = document.getElementById("xingming").value;
                var i=1;
                if (xingming === "") {
                document.getElementById("xingming").value = "请填写姓名";
                alert("请填入信息");

                    } else if (xingming.length < 8 || shenfenzheng < 8 || shoujihao < 8) {
                        alert("至少8个字符");
                            }
                            else{
                                alert("提交成功");
                            }
                         }
            

            

        </script>
        
	</body>
</html>
